﻿/* Mixins */

.border-radius (@radius_top_left: 4px, @radius_top_right: 4px, @radius_bottom_right: 4px, @radius_bottom_left: 4px)
{
    -webkit-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
    -moz-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
    border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
}

.dropshadow (@px: 2px, @color: #DDD) {
    -moz-box-shadow: @px @px @px #DDD;
    -webkit-box-shadow: @px @px @px #DDD;
    box-shadow: @px @px @px #DDD;
}

.opacity(@op:100)
{
    filter:alpha(opacity=@op);
    -moz-opacity:@op/100;
    -khtml-opacity:@op/100;
    opacity:@op/100;
}



/* The code */

@chatWindowBodyTop: 90px;

html
{
    font-family: Segoe UI;
    font-size: 11px;
    overflow: hidden;   
}

body
{
    background-color: #EEE;
    margin: 3px;
}

body#chatPresence
{
    background-color: transparent;
}

#chatWindow
{
   
    #chatWindowBody
    {
        z-index: -1;
        position: fixed;
        top: @chatWindowBodyTop;
        height: 304px;
    
        width: 430px;
        background-color: White;
        border: 1px solid #BBB;
    
        .border-radius(1px, 1px, 1px, 1px);
        
                -moz-box-shadow: 0px 1px 1px 1px #BBB;
            -webkit-box-shadow: 0px 1px 1px 1px #BBB;
                    box-shadow: 0px 1px 1px 1px #BBB;
                    
        #conversation
        {
            position:fixed;       
            top: @chatWindowBodyTop+8;
            left: 4px; 
            width: 414px;
            height: 186px;
            overflow: scroll;
            overflow-x: hidden;
            padding: 6px 3px 20px 4px;
            
            .messageContainer
            {
                
                padding: 3px 3px 6px 3px;
                &:nth-child(even){ background-color: #F8F8F8; }  
                
                .sender
                {
                    float:left;
                    color: #888;
                    padding-bottom: 2px;
                    
                }
                
                .time
                {
                    float: right;
                    color: #888;
                }
                
                .content
                {
                    margin-top: 2px;
                    clear: both;
                    font-size: 13px;
                    padding-top: 1px;
                    padding-left: 18px;
                    background-image: url('../images/messageContentListStyleImage.png');
                    background-repeat: no-repeat;
                    background-position: 0px 2px; 
                }
               
            }
            .infoContainer
            {
                font-size: 14px;   
                padding-top: 3px;
                padding-bottom: 8px;
            }
        }
        
        #lastMessageReceived
        {
            position:fixed;       
            top: @chatWindowBodyTop+224;
            left: 4px; 
            border-bottom: 1px solid #AAA;     
            padding: 3px 0px 2px 7px; 
            width: 424px;
            height: 15px;
            color: #287AFF;
            
            &.isTyping
            {
                background-image: url('../images/isTypingIcon.png');
                background-repeat: no-repeat;
                background-position: 6px 0px;
                padding-left: 25px;
            }
        }            
                    
        #typeMessageContainer
        {
            position:fixed;       
            top: @chatWindowBodyTop + 245px;
            left: 4px;
            border-top: 2px solid #EEE;
            
            #message
            {
                width:422px;
                height: 50px;
                border-width: 0px;
                border-top: 1px solid #AAA;
                margin:0px;
                padding:4px 4px 4px 4px;
                overflow: auto;      
                font-family: Segoe UI;
                font-size: 13px;          
            }
            #btnSendMessage
            {
                display:none;
                position: fixed;
                top: @chatWindowBodyTop+247px;
                left: 380px;
                z-index:9999;
                width: 55px;
                text-align: center;
                background-color: #FFF;
                border: 1px solid #BBB;
                color: #222;
            }      
        }
    }
    
        #chatWindowHeader
    {
        .presenceitem 
        {
            position: fixed;
            width: 420px;
            padding: 5px;
            background-color: White;
            border: 1px solid #AAA;
    
            .border-radius(1px, 14px, 1px, 14px);
        
                -moz-box-shadow: 0px 0px 1px 1px #BBB;
            -webkit-box-shadow: 0px 0px 1px 1px #BBB;
                    box-shadow: 0px 0px 1px 1px #BBB;
                    

            .hidden
            {
                display: none;
            }
    
            .availability
            {
                float: left;
                width: 8px;
                height: 50px;
                .border-radius(2px,0px,0px,2px);
        

                &.available
                {
                    border: 1px solid #91FF75;
                    background-image: url('../images/bar_available.png');
                }
                &.blocked
                {
                    border: 1px solid #E83F3F;
                    background-image: url('../images/bar_dnd.png');
                }
                &.dnd
                {
                    border: 1px solid #E83F3F;
                    background-image: url('../images/bar_dnd.png');
                }
                &.busy
                {
                    border: 1px solid #E83F3F;
                    background-image: url('../images/bar_busy.png');
                }
                &.away
                {
                    border: 1px solid #C0C0C0;
                    background-image: url('../images/bar_away.png');
                }
                &.offline
                {
                    border: 1px solid #C0C0C0;
                    background-image: url('../images/bar_away.png');
                }
                &.unknown
                {
                    border: 1px solid #C0C0C0;
                    background-color: #C0C0C0;
                }
            }
    
            .statusImage
            {
                float: left;
                width: 48px;
                height: 48px;
                padding: 1px; /*white border around image */
                border: 1px solid #777;
                border-left: 0px;
            }
    
            .sidePanel
            {
                float: left;
                margin-left: 5px;
        
                .name
                {
                    color: #222;
                    font-size: 13px;
                }
        
                .status, .jobtitle
                {
                    color: #555;
                    font-size: 11px;
                    letter-spacing: 0.3px;
                    margin-top: 2px;
                }
            }
    
            .buttons
            {
                clear: both;
                float: left;
                width: 428px;
                height:25px;
                margin: 0px -5px -5px -4px;

        
                .button
                {
                    float: left;
                    color: #333;
    
                    margin: 4px 2px 0px 120px;
                    padding: 1px 5px;
                    
                    cursor: pointer;
            
                    &.enabled:hover, &.highlight
                    {
                        padding: 0px 4px; /* lower the padding to make room for the border */
    
                        border: 1px solid #6BC8FF;
            
                        .border-radius;

                        background: #f0f9ff;
                        background: -moz-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff));
                        background: -webkit-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
                        background: -o-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
                        background: -ms-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
                        background: linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);   
                    }
            
                    &.disabled
                    {
                        .opacity(40);
                        cursor: default;
                    }

                    &.phonebutton
                    {
                        margin-left: 80px;
                    }
            
                    /* correct image vertical alignment */
                    &.emailbutton > img
                    {
                        margin-top: 1px;
                        margin-bottom: 1px;
                    }
                
                    &.phonebutton > img
                    {
                        margin-bottom: 0px;
                        padding-bottom:2px;
                    }

                    > img
                    {
                        margin-right: 6px;
                        vertical-align: middle;
                    }
                }
        
				.left{
					float: left;
					margin-left: 50px;
				}
				.right{
					float: right;
					margin-right: 40px;
				}

                .phonetooltip
                {
                    clear:both;
                    margin: 0px 0px 0px 228px;

                    width: 200px;
            
                    border: 1px solid #C5C9DE;
                    background-color: White;

                    .dropshadow;
            
                    .phoneContainer
                    {
                
                        height: 42px;
                
                        border-bottom: 1px dashed #CCC;
                        &:last-child {  border-bottom: 0px !important;  }
                
                        &:hover
                        {
                            background-image: url('../images/gradient-light.png');
                            background-repeat:repeat;
                    
                            /*remove border right of phone icon */
                            img
                            {
                                border-right: 0px;
                                margin-right: 1px;
                            }
                        }
                
                        img
                        {
                            vertical-align: middle;
                            padding: 5px 8px 18px 9px;
                            border-right: 1px solid #EEE;
                            float:left;
                        }
                
                        div
                        {
                            float:left;
                            width: 145px;
                            margin-top:2px;
                            margin-left: 5px;
                    
                            .phone
                            {
                                clear:both;
                            }
                        }
                    }
                }
            }
        }
    }
}

#test
{
    position: fixed;
    top: 420px;
}